<template>
  <div class="addPeo">
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <div class="shenpi">
        <span class="span-1">{{$t('approver')}}</span>
        <div class="radio">
          <el-radio v-model="form.approveType" label="1">{{$t('by_position')}}</el-radio>
          <el-radio v-model="form.approveType" label="2">{{$t('by_person')}}</el-radio>
        </div>
        <div class="selectP" v-if="form.approveType == 1">
          <span class="selectP-span">{{$t('please_select_position')}}</span>
          <el-select
            v-model="form.approveBizId"
            filterable
            :placeholder="$t('please_select',{name:''})"
          >
            <el-option
              @click.native="chanap(item)"
              v-for="item in dict.type.approval_rank"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="selectP selectR" v-else @click="handleGoNewP(0)">
          <span class="selectP-span">{{$t('please_select',{name:''})}}</span>
          <div class="ren">
            <div class="ren-list">
              {{ form.approveName }}
              <!-- <div class="ren-list-one" v-for="(item,index) in renList" :key="index">
                <span>{{item.label}}</span>
                <icon class="el-icon-close" style="cursor: pointer;margin-left: 3px;" v-if="item.label"></icon>
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="shenpi chaosong">
        <span class="span-1">{{$t('copy_to')}}</span>
        <div class="radio">
          <el-radio v-model="form.ccType" label="1">{{$t('by_position')}}</el-radio>
          <el-radio v-model="form.ccType" label="2">{{$t('by_person')}}</el-radio>
        </div>
        <div class="selectP" v-if="form.ccType == 1">
          <span class="selectP-span">{{$t('please_select_position')}}</span>
          <el-select v-model="form.ccBizId" filterable :placeholder="$t('please_select',{name:''})">
            <el-option
              @click.native="chancc(item)"
              v-for="item in dict.type.approval_rank"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="selectP selectR" v-else @click="handleGoNewP(1)">
          <span class="selectP-span">{{$t('please_select',{name:''})}}</span>
          <div class="ren">
            <div class="ren-list">
              {{ form.ccName }}
              <!-- <div class="ren-list-one" v-for="(item,index) in renList" :key="index">
                <span>{{item.label}}</span>
                <icon class="el-icon-close" style="cursor: pointer;margin-left: 3px;" v-if="item.label"></icon>
              </div> -->
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
        <el-button @click="cancel">{{$t('cancel')}}</el-button>
      </div>

      <NewPeo ref="newPeople" @handleChoosePeople="handleChoosePeople"></NewPeo>
    </el-dialog>
  </div>
</template>

<script>
import { positionList } from "@/api/custom/employerList";
import NewPeo from "@/views/custom/approvalWay/createdPeo.vue";
//
export default {
  dicts: ["approval_rank"],
  components: {
    NewPeo,
  },
  data() {
    return {
      open: false,
      title: null,
      spradio: "1",
      csradio: "1",
      value: "",
      options: [],
      // renList:[
      //   {
      //     label:"111"
      //   }
      // ],

      form: {
        approvalProcessId: "",
        approveBizId: "",
        approveType: "1",
        approveName: "",
        ccBizId: "",
        ccType: "1",
        ccName: "",
      },
      employerId: null,
    };
  },
  watch: {
    "form.approveType"(newValue) {
      this.form.approveBizId = "";
      this.form.approveName = "";
    },
    "form.ccType"(newValue) {
      this.form.ccBizId = "";
      this.form.ccName = "";
    },
  },
  created() {},
  methods: {
    getpositionList() {
      positionList({
        pageNum: 1,
        pageSize: 999,
      }).then((res) => {
        this.options = res.rows;
      });
    },
    handleChange(rows, employerId) {
      this.employerId = employerId;
      this.open = true;
      this.title = rows.id ? this.$t('edit') : this.$t('add');
      this.form = { ...rows };
      this.getpositionList();
    },
    submitForm() {
      if (!this.form.approveBizId) {
        this.$modal.msgWarning(this.$t('please_select',{name:this.$t('approver')}));
        return;
      }
      // if (!this.form.ccBizId) {
      //   this.$modal.msgWarning(this.$t('please_select',{name:this.$t('copy_to')}));
      //   return;
      // }
      this.open = false;
      this.$emit("handleAddPeople", this.form);
    },
    cancel() {
      this.form = {
        approveBizId: "",
        approveType: "1",
        approveName: "",
        ccBizId: "",
        ccType: "1",
        ccName: "",
      };
      this.open = false;
    },
    chanap(item) {
      console.log(item, 111);
      this.form.approveName = item.label;
    },
    chancc(item) {
      this.form.ccName = item.label;
    },
    handleGoNewP(sign) {
      this.$refs.newPeople.handleChangePA(sign, this.employerId);
    },
    handleChoosePeople(e) {
      if (!e.type) {
        this.form.approveBizId = e.approveBizId;
        this.form.approveName = e.approveName;
      } else {
        this.form.ccBizId = e.approveBizId;
        this.form.ccName = e.approveName;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.radio {
  margin-top: 20px !important;
}
.selectP {
  margin-top: 20px;
  &-span {
    margin-right: 20px;
  }
}
.selectR {
  display: flex;
  .ren {
    width: 284px;
    border: 1px solid #dcdfe6;
    display: flex;
    align-items: center;
    padding: 0 4px;
    min-height: 36px;
    border-radius: 4px;
    &-list {
      display: flex;
      align-items: center;
      flex-flow: row wrap;
      padding: 3px;
      &-one {
        padding: 3px;
        background-color: #eeeeee;
        border-radius: 2px;
        margin-right: 8px;
        margin-bottom: 3px;
      }
    }
  }
}
.chaosong {
  margin-top: 50px;
}
</style>
